import 'package:aone_common/common.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';
import 'package:prototype/components/v_navigation_bar/v_navigation_bar_controller.dart';

import '../../theme/custom_theme.dart';

class VNavigationBar extends StatelessWidget {
  const VNavigationBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Get.put<VNavigationBarController>(VNavigationBarController());
    return Container(
      height: 70.h,
      decoration: BoxDecoration(color: CustomTheme.colorSchema.secondary),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          _navItem(
            key: Routes.home,
            iconName: 'sy.json',
            label: 'home'.tr,
          ),
          _navItem(
            key: Routes.activity,
            iconName: 'chongzhi.json',
            label: 'activity'.tr,
          ),
          _navItem(
            key: 'service',
            iconName: 'kefu.json',
            label: 'customer.services.short'.tr,
          ),
          _navItem(
            key: Routes.user,
            iconName: 'wode.json',
            label: 'profile.prototype'.tr,
          ),
        ],
      ),
    );
  }

  Widget _lottie(String name, {required AnimationController controller}) {
    return Lottie.asset(
      'assets/lottie/$name',
      controller: controller,
      height: 25.h,
      fit: BoxFit.contain,
    );
  }

  Widget _navItem({
    required String key,
    required String iconName,
    required String label,
  }) {
    final logic = Get.find<VNavigationBarController>();
    return Expanded(
      child: Container(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => logic.onTap(key),
          child: Column(
            children: [
              _lottie(
                iconName,
                controller: logic.controllers[key]!,
              ),
              Obx(
                () => AnimatedDefaultTextStyle(
                  duration: const Duration(milliseconds: 1000),
                  style: TextStyle(
                      color: logic.currentKey == key
                          ? CustomTheme.colorSchema.fontColor
                          : CustomTheme.colorSchema.neutral),
                  child: Text(
                    label,
                  ),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
